{% extends '__base__.html' %}
{% load staticfiles %}

{% block content %}

    <div class="app-title">
        {#            页面简介区域#}
        <div>
            <h1><i class="fa fa-th-list"></i> SLB 管理</h1>
            {% if slb_list %}
                <p> 同步阿里云 SLB 信息</p>
            {% else %}
                <p>No slb are available.</p>
            {% endif %}
        </div>
        {#            面包屑区域#}
        <ul class="app-breadcrumb breadcrumb side">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item">系统管理</li>
            <li class="breadcrumb-item active"><a href="#">SLB 管理</a></li>
        </ul>
    </div>
    {#        按钮区域#}
    <div>
        <button class="btn btn-success" type="button" onclick="sync_all_slb()">同步SLB基本信息</button>
        <button class="btn btn-info" type="button" onclick="update_all_ecs_health_info()">刷新所有SLB健康信息</button>
    </div>

    {#        表格区域#}
    {% if slb_list %}
        <div class="row" id="loading">
            <div class="col-md-12">
                <div class="tile">
                    {#                    表格数据区域#}
                    <div class="tile-body table-responsive" id="table">
                        <table class="table table-hover table-bordered" id="sampleTable"
                               style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                            <thead>
                            <tr>
                                <th class="text-right">ECS名称&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SLB状态&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;健康状态&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;操作&nbsp;&nbsp;&nbsp;</th>
                                <th>健康状态</th>
                                <th>实例ID</th>
                                <th>实例别名</th>
                                <th>实例状态</th>
                                <th>实例IP</th>
                                <th>IP地址类型</th>
                                <th>网络类型</th>
                                <th>创建时间</th>
                                <th>关联应用</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for slb in slb_list %}
                                <tr>
                                    <td class="text-right" id="td_{{ slb.id }}">
                                        {% for ecs in slb.slbhealthstatus_set.all %}
                                            <p>
                                                <span>{{ ecs.ECS }}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                                {% if ecs.SLBStatus == "added" %}
                                                    <span class="text-info">已添加</span>{% else %}<span
                                                        class="text-danger">已移除</span>{% endif %}&nbsp;&nbsp;&nbsp;&nbsp;
                                                {% if ecs.SLBStatus == "added" %}
                                                    {% if ecs.health_status == "normal" %}
                                                        <span class="text-success">正常</span>&nbsp;
                                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                    {% elif ecs.health_status == "abnormal" %}
                                                        <span class="text-danger">异常</span>
                                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                    {% else %}<span class="text-warning">正在检查</span>&nbsp;
                                                    {% endif %}
                                                {% else %}
                                                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                                {% endif %}
                                                <span>
                                                {% if ecs.SLBStatus == "added" %}
                                                    <a href="javascript:void(0);"
                                                       id="remove_backend_server{{ slb.id }}"
                                                       onclick="remove_backend_server('{{ slb.id }}', '{{ ecs.ECS_id }}')"
                                                       type="button"
                                                       class="btn btn-outline-warning">移除</a>
                                                {% endif %}
                                                    {% if ecs.SLBStatus == "removed" %}
                                                        <a href="javascript:void(0);"
                                                           id="add_backend_server{{ slb.id }}"
                                                           onclick="add_backend_server('{{ slb.id }}', '{{ ecs.ECS_id }}')"
                                                           type="button"
                                                           class="btn btn-outline-success">添加</a>
                                                    {% endif %}
                                                </span>
                                            </p>
                                        {% endfor %}
                                    </td>
                                    <td><a href="javascript:void(0);" id="update_one_ecs_health_info{{ slb.id }}"
                                           onclick="update_one_ecs_health_info({{ slb.id }})" type="button"
                                           class="btn btn-outline-info">刷新</a></td>
                                    <td>
                                        <button type="button" class="btn btn-link">
                                            <a href="{% url 'system:slb_change' slb.id %}">{{ slb.instance_id }}</a>
                                        </button>
                                    </td>
                                    <td>{{ slb.name }}</td>
                                    <td>{{ slb.status }}</td>
                                    <td>{{ slb.ip }}</td>
                                    <td>{% if slb.address_type == "internet" %}公网{% endif %}
                                        {% if slb.address_type == "intranet" %}
                                            私网{% endif %}
                                    </td>
                                    <td>{% if slb.network_type == "classic" %}经典网络{% endif %}
                                        {% if slb.network_type == "vpc" %}
                                            专有网络{% endif %}
                                    </td>
                                    <td>{{ slb.create_date|date:"Y-m-d H:i:s" }}</td>
                                    <td>
                                        {% for application in slb.slbtoapplication_set.all %}
                                            <p>{{ application }}</p>
                                        {% endfor %}
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    {% else %}
        <div class="row">
            <div class="col-md-12">
                <div class="tile">
                    <div class="tile-body">请先同步阿里云 SLB</div>
                </div>
            </div>
        </div>
    {% endif %}

{% endblock %}

{% block custom_static %}

    <!-- Data table plugin-->
    <script type="text/javascript" src="{% static 'js/plugins/jquery.dataTables.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/plugins/dataTables.bootstrap.min.js' %}"></script>
    <script type="text/javascript">$('#sampleTable').DataTable();</script>

    <!-- Notice-->
    <script type="text/javascript" src="{% static 'js/plugins/bootstrap-notify.min.js' %}"></script>

    <script>

        //同步所有SLB
        function sync_all_slb() {
            let postUrl = "{% url 'system:sync_all_slb_from_acs' %}";
            // 显示 loading 遮盖层
            jQuery("#loading").showLoading();
            // 发送 post 请求
            $.post(postUrl, function (data) {
                if (data.success) {
                    // 刷新页面
                    location.reload();
                    // 提示成功信息
                    $.notify({
                        title: "同步成功 : ",
                        message: "从阿里云同步所有 SLB 成功！",
                        icon: 'fa fa-check'
                    }, {
                        type: "success"
                    });
                }
                else {
                    // 提示失败信息
                    $.notify({
                        title: "同步失败 : ",
                        message: "从阿里云同步所有 SLB 失败！",
                        icon: 'fa fa-check'
                    }, {
                        type: "danger"
                    });
                }
                setTimeout(function () {
                    // 延迟300毫秒关闭loading遮盖层
                    jQuery("#loading").hideLoading();
                }, 300);
            });
        }

        // 刷新所有SLB健康信息
        function update_all_ecs_health_info() {
            let postUrl = "{% url 'system:all_slb_health_update' %}";
            // 显示 loading 遮盖层
            jQuery("#loading").showLoading();
            // 发送 post 请求
            $.post(postUrl, function (data) {
                if (data.success) {
                    // 刷新页面
                    location.reload();
                    // 提示成功信息
                    $.notify({
                        title: "刷新成功 : ",
                        message: "从阿里云刷新所有 SLB 健康信息成功！",
                        icon: 'fa fa-check'
                    }, {
                        type: "info"
                    });
                } else {
                    // 提示失败信息
                    $.notify({
                        title: "刷新失败 : ",
                        message: "从阿里云刷新所有 SLB 健康信息失败！",
                        icon: 'fa fa-check'
                    }, {
                        type: "danger"
                    });
                }
                setTimeout(function () {
                    // 延迟300毫秒关闭loading遮盖层
                    jQuery("#loading").hideLoading();
                }, 300);
            });
        }

        // 刷新单个SLB健康信息
        function update_one_ecs_health_info(slb_id, server_id) {
            let postUrl = "/system/one_slb_health_update/" + slb_id + "/";
            // 显示 loading 遮盖层
            jQuery("#loading").showLoading();
            // 发送 post 请求
            $.post(postUrl, function (data) {
                if (data.success) {
                    // 刷新页面
                    location.reload();
                    // 提示成功信息
                    $.notify({
                        title: "刷新成功 : ",
                        message: "从阿里云刷新 SLB 基础信息成功！",
                        icon: 'fa fa-check'
                    }, {
                        type: "info"
                    });
                } else {
                    // 提示失败信息
                    $.notify({
                        title: "刷新失败 : ",
                        message: "从阿里云刷新 SLB 基础信息失败！",
                        icon: 'fa fa-check'
                    }, {
                        type: "danger"
                    });
                }
                setTimeout(function () {
                    // 延迟300毫秒关闭loading遮盖层
                    jQuery("#loading").hideLoading();
                }, 300);
            });
        }

        // 移除 slb 后端服务器
        function remove_backend_server(slb_id, server_id) {
            let postUrl = "/system/slb_remove_backend_server/" + slb_id + "/" + server_id + "/";
            // 显示 loading 遮盖层
            jQuery("#loading").showLoading();
            // 发送 post 请求
            $.post(postUrl, function (data) {
                if (data.success) {
                    // 刷新页面
                    location.reload();
                    // 提示成功信息
                    $.notify({
                        title: "移除成功 : ",
                        message: "从阿里云移除 SLB 后端服务器成功！",
                        icon: 'fa fa-check'
                    }, {
                        type: "warning"
                    });
                } else {
                    // 提示失败信息
                    $.notify({
                        title: "移除失败 : ",
                        message: "从阿里云移除 SLB 后端服务器失败！",
                        icon: 'fa fa-check'
                    }, {
                        type: "danger"
                    });
                }
                setTimeout(function () {
                    // 延迟300毫秒关闭loading遮盖层
                    jQuery("#loading").hideLoading();
                }, 300);
            });
        }

        // 添加 slb 后端服务器
        function add_backend_server(slb_id, server_id) {
            let postUrl = "/system/slb_add_backend_server/" + slb_id + "/" + server_id + "/";
            // 显示 loading 遮盖层
            jQuery("#loading").showLoading();
            // 发送 post 请求
            $.post(postUrl, function (data) {
                if (data.success) {
                    // 刷新页面
                    location.reload();
                    // 提示成功信息
                    $.notify({
                        title: "添加成功 : ",
                        message: "从阿里云添加 SLB 后端服务器成功！",
                        icon: 'fa fa-check'
                    }, {
                        type: "success"
                    });
                } else {
                    // 提示失败信息
                    $.notify({
                        title: "添加失败 : ",
                        message: "从阿里云添加 SLB 后端服务器失败！",
                        icon: 'fa fa-check'
                    }, {
                        type: "danger"
                    });
                }
                setTimeout(function () {
                    // 延迟300毫秒关闭loading遮盖层
                    jQuery("#loading").hideLoading();
                }, 300);
            });
        }

    </script>

{% endblock %}